<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>animation</title>
    <link rel="stylesheet" href="../../styles/normalize.css" />
    <style type="text/css">
      /* animation: 3s ease-in 1s infinite reverse both running slidein; */
      /* p {
        animation-duration: 3s;
        animation-name: slidein;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        background: red;
      } */
      @keyframes slidein2 {
        from {
          margin-left: 100%;
          width: 300%;
        }
        /* 75% {
          font-size: 300%;
          margin-left: 25%;
          width: 150%;
        } */

        to {
          margin-left: 0%;
          width: 100%;
        }
      }
      /*
       animation-duration: 3s; 完成一个动画周期所需的时间
       animation-iteration-count: 3;
       9s 内完成 3次动画
       每次动画的起点是轮流的 
      */
      .slidein {
        animation-name: slidein;
        animation-duration: 3s;
        animation-iteration-count: 3;
        animation-direction: alternate;
      }

      @keyframes slidein {
        from {
          margin-left: 100%;
          width: 300%;
        }

        to {
          margin-left: 0%;
          width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <div class="box">
      <h1 id="watchme">Watch me move</h1>
      <p>
        This example shows how to use CSS animations to make
        <code>h1</code> elements move across the page.
      </p>
      <p>
        In addition, we output some text each time an animation event fires, so
        you can see them in action.
      </p>
      <ul id="output"></ul>
      <!-- <p>
        The Caterpillar and Alice looked at each other for some time in silence:
        at last the Caterpillar took the hookah out of its mouth, and addressed
        her in a languid, sleepy voice.
      </p> -->
    </div>

    <script>
      console.log(1);
      var e = document.getElementById("watchme");
      e.addEventListener("animationstart", listener, true);
      e.addEventListener("animationend", listener, false);
      e.addEventListener("animationiteration", listener, false);

      // Event listener callback function that handles different animation events
      function listener(e) {
        // Create a new list item element to display animation event info
        var l = document.createElement("li");

        // Determine which type of animation event occurred and set appropriate message
        switch (e.type) {
          case "animationstart":
            // Display when animation begins, showing the elapsed time (always 0 at start)
            l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
            break;
          case "animationend":
            // Display when animation completes, showing total elapsed time
            l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
            break;
          case "animationiteration":
            // Display when animation repeats, showing time at iteration point
            l.innerHTML = "New loop started at time " + e.elapsedTime;
            break;
        }
        // Add the new list item to the output list in the DOM
        document.getElementById("output").appendChild(l);
      }
      e.className = "slidein";
    </script>
  </body>
</html>
